<!DOCTYPE html>
<html lang="en">
<head>
<title>What does it mean to make content accessible?</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta content="" name="description">
<link href="../css/help.css" media="all" rel="stylesheet" type="text/css" charset="utf-8">
<link href="/library/webjars/fontawesome/4.7.0/css/font-awesome.min.css" media="screen" rel="stylesheet">
<link href="/library/skin/morpheus-default/tool.css" media="screen" rel="stylesheet" type="text/css" charset="utf-8">
<script src="/library/webjars/jquery/1.12.4/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="/library/js/headscripts.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
    includeWebjarLibrary('featherlight');
    $(document).ready(function(){
      $("a.screensteps-image-zoom").featherlight({
        type: { image:true },
        closeOnClick: 'anywhere'
      }); 
    });   
</script>
</head>
<body>
  <div><div>
<div><h1 class="article-title">What does it mean to make content accessible?</h1></div>
<div>



    <div class="step-instructions screensteps-textblock screensteps-wrapper--introduction screensteps-wrapper">
  <div id="text-content_2F313C78-D644-42BB-AA90-D441C4D9195E" class="text-block-content">
    <p>Everybody experiences the world, including content they access on the internet, in their own way. How individuals experience content on the internet can be vastly different depending on the computer or device, the size of the screen on which they view it, and how they interact with it. </p>
<p>For example, while some people read text and interpret images they view, others use assistive technology to listen to content using a screen reader. Meanwhile, some people click on links using a mouse or similar device, while others navigate using a keyboard or by tapping on touch screens.</p>
<p>Improving the <em>accessibility</em> of content is about reducing basic barriers to comprehension, such as providing <em>alternative text</em> for images, so that those who cannot see the images can grasp their meaning. Similarly, making captions or transcript text available for a video file can make it <em>accessible</em> to someone who cannot hear audio.</p>
<p>For more technical information about making content accessible, see <a href="content.hlp?docId=whataresomeguidelinesformakingcontentaccessible">What are some guidelines for making content accessible?</a></p>
  </div>
</div>

      <div class="step screensteps-section screensteps-depth-1" id="what-does-an-example-of-inaccessible-content-look-like">
    <h2 class="step-title screensteps-heading">What does an example of inaccessible content look like?</h2>
      <div class="step-instructions screensteps-textblock">
  <div id="text-content_3348ABB9-7A16-4D14-85F5-AA550CAE912E" class="text-block-content">
    <p>The next section on this page contains a photograph with no <em>alternative text</em>. It is an example of very inaccessible content. The reasons why it is inaccessible will become apparent by the number of questions we need to ask and answer in order to understand its content.</p>
  </div>
</div>
 
        <div class="step screensteps-section screensteps-depth-2" id="what-is-depicted-in-the-image-below">
    <h3 class="step-title screensteps-heading">What is depicted in the image below?</h3>
        <div class="image screensteps-image">
      <img src="https://media.screensteps.com/image_assets/assets/001/310/404/original/553e85e5-67fd-4ce2-9dde-5f1e06b5cd7a.png" alt="" height="454" width="500">
  </div>
 
      <div class="step-instructions screensteps-textblock">
  <div id="text-content_8910992E-8E46-40FD-B6D9-9CA5C780720E" class="text-block-content">
    <p>The photograph above depicts the title page of a book that was published in 1682. Unless you're curious about this image, which is irrelevant to the topic at hand, you might want to skip to the next question: <a href="#Why-is-the-content-of-the-image-above-inaccessible" target="_self">Why is the content of the image above inaccessible?</a></p>
<p>The book in the picture contains a play entitled <em>Le Menteur</em>, a French comedy written by Pierre Corneille.</p>
<p>At the top of the page in the photograph is a frontispiece, a picture of a scene from the play. This frontispiece contains some of the following information:</p>
<ul>
<li>There are four young people, two women and two men, in a park.</li>
<li>The two men are positioned to the right of a fountain (the reader's left), and the two women to the left (the reader's right).</li>
<li>One woman has tripped and nearly fallen. The other woman is standing behind her. The woman in back is holding up her right hand, but it's not clear what gesture she's making; maybe she's motioning to stop her friend from falling. The standing woman holds a pair of gloves near her waist in her left hand.</li>
<li>One man has caught the falling woman by her right hand, and is helping her up. In his left hand, he has taken off his hat and is holding it up, as if to greet the women. He is dressed in nice clothing.</li>
<li>The other man, who is more plainly dressed, stands demurely behind the man who is helping the woman to stand.</li>
<li>Behind the people and fountain are some bystanders. You can't tell if the people in the background are watching what the other four are doing.</li>
</ul>
<p>Underneath the frontispiece is a decorative border that surrounds text. The text indicates the title of the play, which it is a comedy, and that it was written by Pierre Corneille: "Le Menteur / Comedie / Par le Sr. / P. Corneille."</p>
  </div>
</div>
 
  </div>
 
        <div class="step screensteps-section screensteps-depth-2" id="Why-is-the-content-of-the-image-above-inaccessible">
    <h3 class="step-title screensteps-heading">Why is the content of the image above inaccessible?</h3>
      <div class="step-instructions screensteps-textblock">
  <div id="text-content_FD985680-8579-4D21-84BC-FD89D577E344" class="text-block-content">
    <p>Below are just some of the reasons why the image above might be inaccessible.</p>
<ul>
<li>All of the text included above regarding what the photograph contains is necessary for a screen reader user to get similar meaning out of it compared to what someone else might be able to interpret by looking at the image.</li>
<li>There's no meaningful <strong>Alternative Text</strong> (<strong>Alt Text</strong>) on the image. A screen reader user might hear the image's file name, or nothing at all, where someone else might see the image.</li>
<li>There's text on the page of the book, which must be typed out so a screen reader can present it to users.</li>
<li>The image is small. It's in a format that doesn't allow you to zoom in on it to see it very well, so someone with vision impairment may have greater difficulty seeing or understanding it than someone else.</li>
<li>The quality of the image is relatively poor. On a high-resolution screen, it may appear grainy or blurry.</li>
<li>It doesn't have very good color contrast, and that may also make it harder for some users to see or read.</li>
</ul>
  </div>
</div>
 
  </div>
 
  </div>

      <div class="step screensteps-section screensteps-depth-1" id="what-types-of-content-are-inaccessible">
    <h2 class="step-title screensteps-heading">What types of content are inaccessible?</h2>
      <div class="step-instructions screensteps-textblock">
  <div id="text-content_9CADCD23-8E9D-4A80-888A-F1580C231A7B" class="text-block-content">
    <p>Certain types of content tend to be more inaccessible than others. The following is a list of the worst offenders that can cause barriers to comprehension when they are not marked up for assistive technology to present them adequately or when they lack critical contextual information.  Select an item in the list for more information on how to make it more accessible.</p>
<ol>
<li>
<a href="content.hlp?docId=howcanimakeimagesmoreaccessible">Images</a> (as demonstrated in the example above)</li>
<li><a href="content.hlp?docId=howcanimaketablesmoreaccessible">Tables</a></li>
<li><a href="content.hlp?docId=howcanimakevideosandaudiofilesmoreaccessible">Videos and audio files</a></li>
<li><a href="content.hlp?docId=howcanimakelinksaccessible">Links</a></li>
<li><a href="content.hlp?docId=howcanimakelistsofitemsaccessible">Lists of items</a></li>
<li><a href="content.hlp?docId=howcanchoicesinbackgroundandtextcoloraffectaccessibility">Background and text colors</a></li>
<li>
<a href="content.hlp?docId=howcanistructuremydocumenttomakeitmoreaccessible">Page structure</a> that isn't clearly defined, such as important information that is conveyed only with reference to a location on a page (e.g., "Click the link at the top left corner of the page" as opposed to "Click the <strong>Reset</strong> link")</li>
<li><a href="content.hlp?docId=whyshouldiuseparagraphbreaksinmydocument">Line breaks (Shift + Enter/Return) instead of paragraph breaks (Enter/Return)</a></li>
</ol>
  </div>
</div>
 
  </div>


</div>
</div></div>
</body>
</html>
